<template>
  <div class="page">
    <div class="table-wrap">
      <div class="tools">
        <el-select v-model="parentId" placeholder="请选择菜单" size="small" @change="menuChange">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="(item,index) in treeData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-if="parentId" v-model="subMenuId" placeholder="请选择功能" size="small">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="(item,index) in subMenuData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="search">
          搜索
        </el-button>        <!-- <el-select v-model="selectId" placeholder="请选择菜单" size="small" @change="menuChange">
          <el-option-group
            v-for="group in treeData"
            :key="group.id"
            :label="group.name"
          >
            <el-option
              v-for="item in group.children"
              :key="`group-${item.id}`"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-option-group>
        </el-select> -->
      </div>
      <el-table :data="listData" border @row-dblclick="dblclick">
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="apiUrl" label="地址" align="center"></el-table-column>
        <el-table-column label="关联功能" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.subMenuId&&filterData.length">
              <div v-for="(item,index) in scope.row.subMenuId.split(',')" :key="index">
                {{ item | transfer(filterData) }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="创建时间" align="center">
          <span slot-scope="scope">{{ scope.row.createdAt | formatDate }}</span>
        </el-table-column>
        <el-table-column prop="code" label="操作" align="center">
          <div slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="update('update',scope.row)">
              修改
            </el-button> -->
            <el-button type="info" size="mini" @click="update('delete',scope.row)">
              删除
            </el-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          background
          :page-count="totalPage"
          layout="prev, pager, next"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <msg></msg> -->
  </div>
</template>

<script>
import { api, formatDate } from '~/assets/utils'
export default {
  layout: 'project',
  data() {
    return {
      parentId: null,
      subMenuId: null,
      totalPage: 0,
      selectId: '',
      filterData: [],
      treeData: [],
      listData: []
    }
  },
  filters: {
    formatDate(val) {
      return formatDate(val, 'yyyy-MM-dd hh:mm')
    },
    transfer(subId, filterData) {
      let str = ''
      if (subId) {
        const obj = filterData.filter(item => item.id == subId)[0]
        str = obj.parentName + '/' + obj.name
      }
      return str
    }
  },
  computed: {
    subMenuData() {
      const arr = this.treeData.filter(item => item.id == this.parentId)
      return arr.length ? arr[0].children : []
    }
  },
  methods: {
    menuChange() {
      this.subMenuId = ''
    },
    search(e) {
      this.getData(1)
    },
    dblclick(row) {
      console.log(row)
      this.update('update', row)
    },
    update(type, item) {
      if (type === 'update') {
        this.$router.push({
          path: `apiDetail`,
          query: {
            id: item.id
          }
        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.$axios.post(api.deleteApi, {
            id: item.id
          })
          this.$message.success('删除成功')
          this.getData(1)
        })
      }
    },
    pageChange(page) {
      this.getData(page)
    },
    async getData(page) {
      const { projectId } = this.$route.params
      const menuId = this.parentId
      const subMenuId = this.subMenuId
      //  const pageSize = 5
      const res = await this.$axios.get(api.apiList, { params: { projectId, page, menuId, subMenuId } })
      this.listData = res.data
      this.totalPage = res.count
      console.log(this.totalPage)
    }
  },
  async mounted() {
    const { projectId } = this.$route.params

    const res = await this.$axios.get(api.tree, { params: { projectId } })
    // this.filterData = res2.data
    res.data.length && res.data.forEach((item, index) => {
      item.children.forEach(ceil => {
        ceil.parentName = item.name
        this.filterData.push(ceil)
      })
    })
    this.treeData = res.data
    this.getData(1)
  }
}
</script>

<style lang="scss" scoped>
.page{
  display: flex;
  .table-wrap{
    flex: 1;
  }
}
.tools{
  padding: 10px 0;
}
.pager{
  padding: 20px 0;
  text-align: center;
}

</style>
